<template>
    <el-popover placement="bottom" :width="320" :offset="21" trigger="click" :popper-style="{ padding: 0 }">
        <template #reference>
            <el-icon><el-icon-bell /></el-icon>
        </template>
        <div class="message">
            <div class="title">消息列表</div>
            <el-scrollbar max-height="304">
                <ul>
                    <li v-for="n in 10" :key="n">
                        <img src="@/assets/icons/msg-system.png" alt="" />
                        <strong>会员管理</strong>
                        <span>2023-03-24 14:35:06</span>
                    </li>
                </ul>
            </el-scrollbar>
            <div class="footer">
                <router-link to="/message">
                    查看更多
                    <el-icon><el-icon-right /></el-icon>
                </router-link>
            </div>
        </div>
    </el-popover>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.message {
    ul {
        li {
            display: flex;
            flex-direction: column;
            line-height: 22px;
            padding: 16px 32px 16px 58px;
            position: relative;
            &:not(:last-child) {
                border-bottom: 1px solid #f0f0f0;
            }
        }
        span {
            color: #909399;
        }
        img {
            width: 32px;
            height: 32px;
            position: absolute;
            left: 16px;
            top: 16px;
        }
    }
    .title {
        font-size: 14px;
        font-weight: 500;
        color: #303133;
        border-bottom: 1px solid #eef0f3;
        padding: 17px 24px;
    }
    .footer {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 54px;
        border-top: 1px solid #eef0f3;
        a {
            display: flex;
            align-items: center;
            .el-icon {
                margin-left: 6px;
            }
        }
    }
}
</style>
